<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>生日快乐</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			a{
				text-decoration: none;
			}
			header{
				background: rgb(255,192,203);
				width: 100%;
				height: 820px;
				
			}
			.headimg{
				width: 100%;
				height: 700px;
				background-color: #8A2BE2;
			}
			.headimg img{
				width: 100%;
				height: 700px;
			}
			header ul{
				width: 100%;
				height: 120px;
				padding-top: 20px;
			}
			header li{
				float: left;
				list-style: none;
				padding-left: 25px;
				margin-left: 70px;
			}
			header a{
					font-size: 30px;
					text-decoration: none;			/*去除超链接下划线*/
					font-family: "微软雅黑";
			}
			header a:link{
				color: white;
			}
			header a:hover{
				color: white;
				border-bottom-style: outset;
				border-color: white;
				padding-bottom: 20px;
			}
			main{
				margin-top: 0;
				width: 100%;
				height: 800px;
			}
			main div{
				width: 100%;
				height: 800px;
			}
			.left{
				width: 20%;
				height: 800px;
				float: left;
				background: rgb(255,255,225);
			}
			.logo{
				width: 20%;
				float: left;
				height: 200px;
			}
			.logo img{
				height: 165px;
				width: 115px;
				margin-left: 60px;
			}
			.aside{
				width: 20%;
				height: 600px;
				padding-top: 35px;
			}
			.aside li{
				font-size: 40px;
				list-style: none;
				margin-left: 35%;
				padding-top: 60px;
			}
			.aside a{
				font-size: 40px;
				text-decoration: none;			
				font-family: "微软雅黑";
				color: cadetblue;
			}
			.aside a:hover{
				font-size: 75px;
				color: rgb(241,158,194);
			}
			.lky{
				width: 80%;
				height: 800px;
				float: right;
				background-image: url(img/11.jpg) ;
				background-color: white;
				background-repeat: no-repeat;
			}
			.lkyyc{
				width: 80%;
				height: 880px;
				display:none;
			}
			.lky:hover .lkyyc{
				display: block;
			}
			.liu{
				background: rgb(255,255,0);
				width: 50%;
				height: 555px;
				float: left;
				padding-top:0 ;
			}
			.liu p{
				margin-top: 0;
				margin-left: auto;
				font-size: 85px;
				
			}
			.I{
				height: 50px;
				float: right;
				margin-bottom: 0px;
				
			}
			.I p{
				margin-top: 0;
				text-align: right;
				font-size: 30px;
				font-weight: 800;
				font-style: italic;
				font-family:"book antiqua";
			}
			.right{
				background: #FFFFFF;
				width: 50%;
				height: 555px;
				float: left;
			}
			.right p{
				padding-top: 18px;
				text-align: center;
				font-size: 19px;
			}
			.right h2{
				padding-top: 25px;
			}
			.like{
				height: 57.16px;
				float: left;
				margin-bottom: 0;
			}
			.like p{
				margin-bottom: 0;
				text-align: left;
				font-weight: 800;
				font-size: 30px;
				font-style: italic;
				font-family: "sf collegiate solid"
			}
		</style>
	</head>
	<body>
		<header id="head">
			<div>
			
			<nav>
				
				<ul>
					<li><img src="img/logo.jpg" width="62.5px" height="77px" /></li>
					<li><a href="生日快乐.html" target="_blank" title="返回首页" >首页</a></li>
					<li><a href="烟花show.html" target="_blank" title="好看的烟花">烟花show</a></li>
					<li><a href="前程似锦.html" target="_blank" title="前程似锦" >前程似锦</a></li>
					<li><a href="超链接/关于我们.html" target="_blank" title="关于我们">关于我们</a></li>
				</ul>
			</nav>
			</div>
			<div class="headimg">
				<img  src="img/海报.jpg"/>
			</div>
		</header>
		<main>
		<div>
		<div class="left">
			<div class="logo">
				<img src="img/制作logo.png" />
			</div>
			<div>
			<ul class="aside">
				<li><a href="#head">Home</a></li>
				<li><a href="#main">main</a></li>
				<li><a href="#foot">foot</a></li>
				
			</ul>
			</div>
		</div>
		<div class="lky" id="main">
			<div class="lkyyc">
			<img src="img/防弹少年团团体照.jpg" />
			</div>
		</div>
		</div>
		</main>
		<footer id="foot">
			<div class="liu">
				<strong><h1>Miss Wu :</h1></strong>
				<p align="center">send you a piece of my favorite quote.</p>
				<span class="I">
					<p>Happy</p>
				</span>
			</div>
			<div class="right">
				<p align="center">Dedication.</p>
				<p>Hard work.</p>
				<p>Dedication.</p>
				<p>Hard work.</p>
				<p>I'm a one man army</p>
				<p>One man army,</p>
				<p>The world can go against me.</p>
				<p>Ima still come out on top</p>
				<p>I got God on my side.</p>
				<br /><br />
				<hr  color="pink"/>
				<h2 align="right">
				--<a href="https://baike.baidu.com/item/%E5%BC%97%E6%B4%9B%E4%BC%8A%E5%BE%B7%C2%B7%E6%A2%85%E5%A8%81%E7%91%9F/2420601">Floyd Mayweather</a>said
				</h2>
				<span class="like">
				<p>Birthday!</p>
				</span>
			</div>
		</footer>
	</body>
</html>
